<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GitHub风格任务看板(添加任务)</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --github-white: #ffffff;
            --github-border: #e1e4e8;
            --github-bg: #f6f8fa;
            --github-text: #24292e;
            --github-blue: #0366d6;
            --github-green: #28a745;
            --github-purple: #6f42c1;
            --github-red: #d73a49;
            --github-gray: #6a737d;
            --github-orange: #f66a0a;
            --column-width: 320px;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        }

        body {
            background-color: var(--github-bg);
            color: var(--github-text);
            line-height: 1.5;
            padding: 16px;
        }

        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 24px;
            background-color: var(--github-white);
            border: 1px solid var(--github-border);
            border-radius: 6px;
            margin-bottom: 24px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .logo h1 {
            font-size: 20px;
            font-weight: 600;
        }

        .logo img {
            width: 32px;
            height: 32px;
        }

        .search-box {
            display: flex;
            align-items: center;
            background: var(--github-bg);
            border: 1px solid var(--github-border);
            border-radius: 6px;
            padding: 6px 12px;
            width: 300px;
        }

        .search-box input {
            background: transparent;
            border: none;
            outline: none;
            width: 100%;
            color: var(--github-text);
            font-size: 14px;
        }

        .search-box i {
            color: var(--github-gray);
            margin-right: 8px;
        }

        .user-actions {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .user-actions img {
            width: 32px;
            height: 32px;
            border-radius: 50%;
        }

        .filter-bar {
            display: flex;
            gap: 16px;
            padding: 12px 16px;
            background-color: var(--github-white);
            border: 1px solid var(--github-border);
            border-radius: 6px;
            margin-bottom: 24px;
            flex-wrap: wrap;
        }

        .filter-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            cursor: pointer;
        }

        .filter-item.active {
            color: var(--github-blue);
            font-weight: 500;
        }

        .container {
            display: flex;
            gap: 24px;
            overflow-x: auto;
            padding-bottom: 24px;
        }

        .column {
            flex: 0 0 var(--column-width);
            background-color: var(--github-white);
            border: 1px solid var(--github-border);
            border-radius: 6px;
            display: flex;
            flex-direction: column;
            max-height: 80vh;
        }

        .column-header {
            padding: 16px;
            border-bottom: 1px solid var(--github-border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .column-title {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 600;
        }

        .count {
            background: var(--github-bg);
            color: var(--github-gray);
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
        }

        .column-actions {
            color: var(--github-gray);
            cursor: pointer;
        }

        .tasks {
            flex: 1;
            overflow-y: auto;
            padding: 8px;
        }

        .task {
            background-color: var(--github-white);
            border: 1px solid var(--github-border);
            border-radius: 6px;
            padding: 12px 16px;
            margin-bottom: 8px;
            cursor: move;
            transition: all 0.2s;
        }

        .task:hover {
            border-color: #c0c0c0;
            box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
        }

        .task-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
        }

        .task-title {
            font-weight: 600;
            font-size: 14px;
        }

        .task-labels {
            display: flex;
            gap: 4px;
            margin: 8px 0;
            flex-wrap: wrap;
        }

        .label {
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
        }

        .label-bug {
            background-color: #d73a4a1a;
            color: #cb2431;
        }

        .label-feature {
            background-color: #0fdb581a;
            color: #0cb466;
        }

        .label-enhancement {
            background-color: #0366d61a;
            color: #0366d6;
        }

        .label-documentation {
            background-color: #6f42c11a;
            color: #6f42c1;
        }

        .label-refactor {
            background-color: #f66a0a1a;
            color: #f66a0a;
        }

        .task-meta {
            display: flex;
            justify-content: space-between;
            color: var(--github-gray);
            font-size: 12px;
            margin-top: 8px;
        }

        .task-assignee {
            display: flex;
            align-items: center;
        }

        .task-assignee img {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            margin-right: 4px;
        }

        .add-task {
            padding: 12px 16px;
            color: var(--github-gray);
            border-top: 1px solid var(--github-border);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
        }

        .add-task:hover {
            color: var(--github-blue);
        }

        /* 拖放样式 */
        .dragging {
            opacity: 0.5;
            transform: rotate(5deg);
        }

        .drag-over {
            background-color: #f0f7ff;
            border: 2px dashed var(--github-blue);
        }

        /* 模态框样式 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }

        .modal-content {
            background-color: var(--github-white);
            border-radius: 6px;
            width: 600px;
            max-width: 90%;
            max-height: 80vh;
            overflow-y: auto;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        }

        .modal-header {
            padding: 16px;
            border-bottom: 1px solid var(--github-border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-title {
            font-weight: 600;
            font-size: 18px;
        }

        .modal-close {
            color: var(--github-gray);
            cursor: pointer;
            font-size: 20px;
        }

        .modal-body {
            padding: 16px;
        }

        .form-group {
            margin-bottom: 16px;
        }

        .form-group label {
            display: block;
            margin-bottom: 6px;
            font-weight: 500;
            font-size: 14px;
        }

        .form-control {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid var(--github-border);
            border-radius: 6px;
            font-size: 14px;
        }

        .form-control:focus {
            outline: none;
            border-color: var(--github-blue);
            box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.1);
        }

        .form-actions {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            margin-top: 24px;
        }

        .btn {
            padding: 8px 16px;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            border: 1px solid transparent;
        }

        .btn-primary {
            background-color: var(--github-green);
            color: white;
        }

        .btn-secondary {
            background-color: var(--github-bg);
            color: var(--github-text);
            border-color: var(--github-border);
        }

        .btn-danger {
            background-color: var(--github-red);
            color: white;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            header {
                flex-direction: column;
                gap: 16px;
                padding: 16px;
            }

            .search-box {
                width: 100%;
            }

            .container {
                flex-direction: column;
                align-items: center;
            }

            .column {
                width: 100%;
                max-width: var(--column-width);
            }
        }

        .empty-state {
            text-align: center;
            padding: 24px;
            color: var(--github-gray);
        }

        .empty-state i {
            font-size: 48px;
            margin-bottom: 16px;
            color: var(--github-border);
        }

        .task-priority {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 6px;
        }

        .priority-high {
            background-color: var(--github-red);
        }

        .priority-medium {
            background-color: var(--github-orange);
        }

        .priority-low {
            background-color: var(--github-green);
        }
    </style>
</head>

<body>
    <header>
        <div class="logo">
            <img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="GitHub Logo">
            <h1>GitHub任务看板</h1>
        </div>
        <div class="search-box">
            <i class="fas fa-search"></i>
            <input type="text" placeholder="搜索任务..." id="search-input">
        </div>
        <div class="user-actions">
            <i class="far fa-bell"></i>
            <i class="fas fa-plus" id="add-task-btn"></i>
            <img src="https://avatars.githubusercontent.com/u/1?v=4" alt="用户头像">
        </div>
    </header>

    <div class="filter-bar">
        <div class="filter-item active" data-filter="all">
            <i class="fas fa-tasks"></i>
            <span>所有任务</span>
        </div>
        <div class="filter-item" data-filter="bug">
            <i class="fas fa-bug"></i>
            <span>Bug</span>
        </div>
        <div class="filter-item" data-filter="feature">
            <i class="fas fa-star"></i>
            <span>功能</span>
        </div>
        <div class="filter-item" data-filter="documentation">
            <i class="fas fa-book"></i>
            <span>文档</span>
        </div>
        <div class="filter-item" data-filter="assigned">
            <i class="fas fa-user-check"></i>
            <span>指派给我</span>
        </div>
    </div>

    <div class="container">
        <!-- 待处理列 -->
        <div class="column" id="todo-column">
            <div class="column-header">
                <div class="column-title">
                    <i class="fas fa-circle" style="color: #d73a49;"></i>
                    <span>待处理</span>
                    <span class="count">3</span>
                </div>
                <div class="column-actions">
                    <i class="fas fa-ellipsis-h"></i>
                </div>
            </div>
            <div class="tasks" id="todo-tasks">
                <div class="task" draggable="true" data-id="1" data-priority="high">
                    <div class="task-header">
                        <div class="task-title">
                            <span class="task-priority priority-high"></span>
                            修复登录页面样式问题
                        </div>
                        <i class="far fa-comment"> 2</i>
                    </div>
                    <div class="task-labels">
                        <span class="label label-bug">bug</span>
                        <span class="label label-enhancement">css</span>
                    </div>
                    <div class="task-meta">
                        <div>#101</div>
                        <div class="task-assignee">
                            <img src="https://avatars.githubusercontent.com/u/2?v=4" alt="Assignee">
                            userA
                        </div>
                    </div>
                </div>
                <div class="task" draggable="true" data-id="2" data-priority="medium">
                    <div class="task-header">
                        <div class="task-title">
                            <span class="task-priority priority-medium"></span>
                            优化数据库查询性能
                        </div>
                        <i class="far fa-comment"> 5</i>
                    </div>
                    <div class="task-labels">
                        <span class="label label-enhancement">enhancement</span>
                        <span class="label label-refactor">performance</span>
                    </div>
                    <div class="task-meta">
                        <div>#102</div>
                        <div class="task-assignee">
                            <img src="https://avatars.githubusercontent.com/u/3?v=4" alt="Assignee">
                            userB
                        </div>
                    </div>
                </div>
            </div>
            <div class="add-task" data-column="todo">
                <i class="fas fa-plus"></i>
                <span>添加任务</span>
            </div>
        </div>

        <!-- 进行中列 -->
        <div class="column" id="inprogress-column">
            <div class="column-header">
                <div class="column-title">
                    <i class="fas fa-circle" style="color: #fb8532;"></i>
                    <span>进行中</span>
                    <span class="count">2</span>
                </div>
                <div class="column-actions">
                    <i class="fas fa-ellipsis-h"></i>
                </div>
            </div>
            <div class="tasks" id="inprogress-tasks">
                <div class="task" draggable="true" data-id="3" data-priority="high">
                    <div class="task-header">
                        <div class="task-title">
                            <span class="task-priority priority-high"></span>
                            实现用户个人资料页面
                        </div>
                        <i class="far fa-comment"> 7</i>
                    </div>
                    <div class="task-labels">
                        <span class="label label-feature">feature</span>
                        <span class="label label-enhancement">ui</span>
                    </div>
                    <div class="task-meta">
                        <div>#103</div>
                        <div class="task-assignee">
                            <img src="https://avatars.githubusercontent.com/u/4?v=4" alt="Assignee">
                            userC
                        </div>
                    </div>
                </div>
            </div>
            <div class="add-task" data-column="inprogress">
                <i class="fas fa-plus"></i>
                <span>添加任务</span>
            </div>
        </div>

        <!-- 审核中列 -->
        <div class="column" id="review-column">
            <div class="column-header">
                <div class="column-title">
                    <i class="fas fa-circle" style="color: #6f42c1;"></i>
                    <span>审核中</span>
                    <span class="count">1</span>
                </div>
                <div class="column-actions">
                    <i class="fas fa-ellipsis-h"></i>
                </div>
            </div>
            <div class="tasks" id="review-tasks">
                <div class="task" draggable="true" data-id="4" data-priority="low">
                    <div class="task-header">
                        <div class="task-title">
                            <span class="task-priority priority-low"></span>
                            编写API文档
                        </div>
                        <i class="far fa-comment"> 3</i>
                    </div>
                    <div class="task-labels">
                        <span class="label label-documentation">documentation</span>
                        <span class="label label-enhancement">api</span>
                    </div>
                    <div class="task-meta">
                        <div>#104</div>
                        <div class="task-assignee">
                            <img src="https://avatars.githubusercontent.com/u/5?v=4" alt="Assignee">
                            userD
                        </div>
                    </div>
                </div>
            </div>
            <div class="add-task" data-column="review">
                <i class="fas fa-plus"></i>
                <span>添加任务</span>
            </div>
        </div>

        <!-- 已完成列 -->
        <div class="column" id="done-column">
            <div class="column-header">
                <div class="column-title">
                    <i class="fas fa-circle" style="color: #28a745;"></i>
                    <span>已完成</span>
                    <span class="count">2</span>
                </div>
                <div class="column-actions">
                    <i class="fas fa-ellipsis-h"></i>
                </div>
            </div>
            <div class="tasks" id="done-tasks">
                <div class="task" draggable="true" data-id="5" data-priority="medium">
                    <div class="task-header">
                        <div class="task-title">
                            <span class="task-priority priority-medium"></span>
                            设计应用图标
                        </div>
                        <i class="far fa-comment"> 4</i>
                    </div>
                    <div class="task-labels">
                        <span class="label label-feature">feature</span>
                        <span class="label label-enhancement">design</span>
                    </div>
                    <div class="task-meta">
                        <div>#105</div>
                        <div class="task-assignee">
                            <img src="https://avatars.githubusercontent.com/u/6?v=4" alt="Assignee">
                            userE
                        </div>
                    </div>
                </div>
                <div class="task" draggable="true" data-id="6" data-priority="high">
                    <div class="task-header">
                        <div class="task-title">
                            <span class="task-priority priority-high"></span>
                            设置CI/CD流水线
                        </div>
                        <i class="far fa-comment"> 6</i>
                    </div>
                    <div class="task-labels">
                        <span class="label label-enhancement">enhancement</span>
                        <span class="label label-refactor">devops</span>
                    </div>
                    <div class="task-meta">
                        <div>#106</div>
                        <div class="task-assignee">
                            <img src="https://avatars.githubusercontent.com/u/7?v=4" alt="Assignee">
                            userF
                        </div>
                    </div>
                </div>
            </div>
            <div class="add-task" data-column="done">
                <i class="fas fa-plus"></i>
                <span>添加任务</span>
            </div>
        </div>
    </div>

    <!-- 任务详情模态框 -->
    <div class="modal" id="task-modal">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title">任务详情</div>
                <div class="modal-close">&times;</div>
            </div>
            <div class="modal-body">
                <form id="task-form">
                    <input type="hidden" id="task-id">
                    <input type="hidden" id="task-column">

                    <div class="form-group">
                        <label for="task-title">标题</label>
                        <input type="text" class="form-control" id="task-title" required>
                    </div>

                    <div class="form-group">
                        <label for="task-description">描述</label>
                        <textarea class="form-control" id="task-description" rows="4"></textarea>
                    </div>

                    <div class="form-group">
                        <label for="task-labels">标签（逗号分隔）</label>
                        <input type="text" class="form-control" id="task-labels" placeholder="bug, css, enhancement">
                    </div>

                    <div class="form-group">
                        <label for="task-priority">优先级</label>
                        <select class="form-control" id="task-priority">
                            <option value="high">高</option>
                            <option value="medium" selected>中</option>
                            <option value="low">低</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="task-assignee">指派人</label>
                        <select class="form-control" id="task-assignee">
                            <option value="userA">userA</option>
                            <option value="userB">userB</option>
                            <option value="userC">userC</option>
                            <option value="userD">userD</option>
                            <option value="userE">userE</option>
                            <option value="userF">userF</option>
                        </select>
                    </div>

                    <div class="form-actions">
                        <button type="button" class="btn btn-danger" id="delete-task">删除</button>
                        <button type="button" class="btn btn-secondary" id="cancel-task">取消</button>
                        <button type="submit" class="btn btn-primary">保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // 获取DOM元素
            const modal = document.getElementById('task-modal');
            const taskForm = document.getElementById('task-form');
            const cancelBtn = document.getElementById('cancel-task');
            const deleteBtn = document.getElementById('delete-task');
            const closeBtn = document.querySelector('.modal-close');
            const addTaskBtn = document.getElementById('add-task-btn');
            const addTaskButtons = document.querySelectorAll('.add-task');
            const searchInput = document.getElementById('search-input');
            const filterItems = document.querySelectorAll('.filter-item');

            // 当前选中的任务
            let currentTask = null;

            // 为每个任务添加拖拽事件
            initDragAndDrop();

            // 初始化任务点击事件
            initTaskClickEvents();

            // 初始化筛选功能
            initFiltering();

            // 初始化搜索功能
            initSearch();

            // 添加任务按钮事件
            addTaskBtn.addEventListener('click', () => {
                openModal();
            });

            // 各列添加任务按钮事件
            addTaskButtons.forEach(button => {
                button.addEventListener('click', () => {
                    const column = button.getAttribute('data-column');
                    openModal(column);
                });
            });

            // 关闭模态框事件
            cancelBtn.addEventListener('click', closeModal);
            closeBtn.addEventListener('click', closeModal);

            // 点击模态框外部关闭
            modal.addEventListener('click', (e) => {
                if (e.target === modal) {
                    closeModal();
                }
            });

            // 删除任务事件
            deleteBtn.addEventListener('click', deleteTask);

            // 表单提交事件
            taskForm.addEventListener('submit', saveTask);

            // 初始化拖放功能
            function initDragAndDrop() {
                const tasks = document.querySelectorAll('.task');
                const columns = document.querySelectorAll('.column');

                tasks.forEach(task => {
                    task.addEventListener('dragstart', () => {
                        task.classList.add('dragging');
                    });

                    task.addEventListener('dragend', () => {
                        task.classList.remove('dragging');
                        updateTaskCounts();
                        saveToLocalStorage();
                    });
                });

                columns.forEach(column => {
                    column.addEventListener('dragover', e => {
                        e.preventDefault();
                        const afterElement = getDragAfterElement(column, e.clientY);
                        const draggable = document.querySelector('.dragging');
                        if (afterElement == null) {
                            column.querySelector('.tasks').appendChild(draggable);
                        } else {
                            column.querySelector('.tasks').insertBefore(draggable, afterElement);
                        }
                        column.classList.add('drag-over');
                    });

                    column.addEventListener('dragleave', () => {
                        column.classList.remove('drag-over');
                    });

                    column.addEventListener('drop', () => {
                        column.classList.remove('drag-over');
                    });
                });
            }

            // 初始化任务点击事件
            function initTaskClickEvents() {
                document.querySelectorAll('.task').forEach(task => {
                    task.addEventListener('click', (e) => {
                        if (!e.target.closest('.fa-comment')) {
                            openModal(null, task);
                        }
                    });
                });
            }

            // 初始化筛选功能
            function initFiltering() {
                filterItems.forEach(item => {
                    item.addEventListener('click', () => {
                        // 移除所有active类
                        filterItems.forEach(i => i.classList.remove('active'));
                        // 添加active类到当前项
                        item.classList.add('active');

                        const filter = item.getAttribute('data-filter');
                        filterTasks(filter);
                    });
                });
            }

            // 初始化搜索功能
            function initSearch() {
                searchInput.addEventListener('input', () => {
                    const searchText = searchInput.value.toLowerCase();
                    filterTasksBySearch(searchText);
                });
            }

            // 根据搜索词筛选任务
            function filterTasksBySearch(searchText) {
                document.querySelectorAll('.task').forEach(task => {
                    const title = task.querySelector('.task-title').textContent.toLowerCase();
                    const labels = task.querySelectorAll('.label');
                    let hasLabelMatch = false;

                    labels.forEach(label => {
                        if (label.textContent.toLowerCase().includes(searchText)) {
                            hasLabelMatch = true;
                        }
                    });

                    if (title.includes(searchText) || hasLabelMatch) {
                        task.style.display = 'block';
                    } else {
                        task.style.display = 'none';
                    }
                });
            }

            // 根据筛选条件过滤任务
            function filterTasks(filter) {
                const tasks = document.querySelectorAll('.task');

                tasks.forEach(task => {
                    if (filter === 'all') {
                        task.style.display = 'block';
                    } else if (filter === 'bug') {
                        const hasBugLabel = task.querySelector('.label-bug');
                        task.style.display = hasBugLabel ? 'block' : 'none';
                    } else if (filter === 'feature') {
                        const hasFeatureLabel = task.querySelector('.label-feature');
                        task.style.display = hasFeatureLabel ? 'block' : 'none';
                    } else if (filter === 'documentation') {
                        const hasDocLabel = task.querySelector('.label-documentation');
                        task.style.display = hasDocLabel ? 'block' : 'none';
                    } else if (filter === 'assigned') {
                        // 这里假设当前用户是userA
                        const assignee = task.querySelector('.task-assignee').textContent;
                        task.style.display = assignee.includes('userA') ? 'block' : 'none';
                    }
                });
            }

            // 打开模态框
            function openModal(column = null, task = null) {
                currentTask = task;

                // 重置表单
                taskForm.reset();

                if (task) {
                    // 编辑现有任务
                    document.getElementById('task-id').value = task.getAttribute('data-id');
                    document.getElementById('task-column').value = task.closest('.column').id;
                    document.getElementById('task-title').value = task.querySelector('.task-title').textContent.trim();

                    // 获取优先级
                    const priority = task.getAttribute('data-priority') || 'medium';
                    document.getElementById('task-priority').value = priority;

                    // 获取指派人
                    const assignee = task.querySelector('.task-assignee').textContent.trim();
                    document.getElementById('task-assignee').value = assignee;

                    // 获取标签
                    const labels = Array.from(task.querySelectorAll('.label')).map(label => label.textContent);
                    document.getElementById('task-labels').value = labels.join(', ');

                    // 显示删除按钮
                    deleteBtn.style.display = 'block';
                } else {
                    // 创建新任务
                    document.getElementById('task-id').value = 'new';
                    document.getElementById('task-column').value = column ? `${column}-column` : 'todo-column';

                    // 隐藏删除按钮
                    deleteBtn.style.display = 'none';
                }

                // 显示模态框
                modal.style.display = 'flex';
            }

            // 关闭模态框
            function closeModal() {
                modal.style.display = 'none';
            }

            // 保存任务
            function saveTask(e) {
                e.preventDefault();

                const id = document.getElementById('task-id').value;
                const columnId = document.getElementById('task-column').value;
                const title = document.getElementById('task-title').value;
                const labels = document.getElementById('task-labels').value;
                const priority = document.getElementById('task-priority').value;
                const assignee = document.getElementById('task-assignee').value;

                if (id === 'new') {
                    // 创建新任务
                    createNewTask(columnId, title, labels, priority, assignee);
                } else {
                    // 更新现有任务
                    updateTask(id, title, labels, priority, assignee);
                }

                closeModal();
                updateTaskCounts();
                saveToLocalStorage();
            }

            // 创建新任务
            function createNewTask(columnId, title, labels, priority, assignee) {
                const column = document.getElementById(columnId);
                const tasksContainer = column.querySelector('.tasks');

                // 生成新ID
                const newId = Math.max(...Array.from(document.querySelectorAll('.task')).map(t => parseInt(t.getAttribute('data-id'))), 0) + 1;

                // 创建任务元素
                const task = document.createElement('div');
                task.className = 'task';
                task.draggable = true;
                task.setAttribute('data-id', newId);
                task.setAttribute('data-priority', priority);

                // 优先级指示器
                const priorityClass = `priority-${priority}`;
                const priorityIndicator = `<span class="task-priority ${priorityClass}"></span>`;

                // 处理标签
                const labelsHtml = labels.split(',').map(label => {
                    const trimmedLabel = label.trim();
                    let labelClass = 'label-enhancement';

                    if (trimmedLabel === 'bug') labelClass = 'label-bug';
                    if (trimmedLabel === 'feature') labelClass = 'label-feature';
                    if (trimmedLabel === 'documentation') labelClass = 'label-documentation';
                    if (trimmedLabel === 'refactor') labelClass = 'label-refactor';

                    return `<span class="label ${labelClass}">${trimmedLabel}</span>`;
                }).join('');

                task.innerHTML = `
                    <div class="task-header">
                        <div class="task-title">
                            ${priorityIndicator}
                            ${title}
                        </div>
                        <i class="far fa-comment"> 0</i>
                    </div>
                    <div class="task-labels">
                        ${labelsHtml}
                    </div>
                    <div class="task-meta">
                        <div>#${newId + 100}</div>
                        <div class="task-assignee">
                            <img src="https://avatars.githubusercontent.com/u/${assignee.charCodeAt(0) % 10}?v=4" alt="Assignee">
                            ${assignee}
                        </div>
                    </div>
                `;

                // 添加事件监听器
                task.addEventListener('dragstart', () => {
                    task.classList.add('dragging');
                });

                task.addEventListener('dragend', () => {
                    task.classList.remove('dragging');
                    updateTaskCounts();
                    saveToLocalStorage();
                });

                task.addEventListener('click', (e) => {
                    if (!e.target.closest('.fa-comment')) {
                        openModal(null, task);
                    }
                });

                // 添加到任务列表
                tasksContainer.appendChild(task);
            }

            // 更新任务
            function updateTask(id, title, labels, priority, assignee) {
                const task = document.querySelector(`.task[data-id="${id}"]`);
                if (!task) return;

                // 更新优先级
                task.setAttribute('data-priority', priority);

                // 更新标题和优先级指示器
                const priorityClass = `priority-${priority}`;
                const titleElement = task.querySelector('.task-title');
                titleElement.innerHTML = `<span class="task-priority ${priorityClass}"></span> ${title}`;

                // 更新标签
                const labelsContainer = task.querySelector('.task-labels');
                labelsContainer.innerHTML = labels.split(',').map(label => {
                    const trimmedLabel = label.trim();
                    let labelClass = 'label-enhancement';

                    if (trimmedLabel === 'bug') labelClass = 'label-bug';
                    if (trimmedLabel === 'feature') labelClass = 'label-feature';
                    if (trimmedLabel === 'documentation') labelClass = 'label-documentation';
                    if (trimmedLabel === 'refactor') labelClass = 'label-refactor';

                    return `<span class="label ${labelClass}">${trimmedLabel}</span>`;
                }).join('');

                // 更新指派人
                const assigneeElement = task.querySelector('.task-assignee');
                assigneeElement.innerHTML = `
                    <img src="https://avatars.githubusercontent.com/u/${assignee.charCodeAt(0) % 10}?v=4" alt="Assignee">
                    ${assignee}
                `;
            }

            // 删除任务
            function deleteTask() {
                if (!currentTask) return;

                const id = currentTask.getAttribute('data-id');
                const task = document.querySelector(`.task[data-id="${id}"]`);

                if (task) {
                    task.remove();
                    updateTaskCounts();
                    saveToLocalStorage();
                }

                closeModal();
            }

            // 更新任务计数
            function updateTaskCounts() {
                document.querySelectorAll('.column').forEach(column => {
                    const count = column.querySelectorAll('.task').length;
                    column.querySelector('.count').textContent = count;
                });
            }

            // 获取拖拽后的元素位置
            function getDragAfterElement(column, y) {
                const draggableElements = [...column.querySelectorAll('.task:not(.dragging)')];

                return draggableElements.reduce((closest, child) => {
                    const box = child.getBoundingClientRect();
                    const offset = y - box.top - box.height / 2;
                    if (offset < 0 && offset > closest.offset) {
                        return { offset: offset, element: child };
                    } else {
                        return closest;
                    }
                }, { offset: Number.NEGATIVE_INFINITY }).element;
            }

            // 保存到本地存储
            function saveToLocalStorage() {
                const columns = {};

                document.querySelectorAll('.column').forEach(column => {
                    const columnId = column.id;
                    const tasks = [];

                    column.querySelectorAll('.task').forEach(task => {
                        tasks.push({
                            id: task.getAttribute('data-id'),
                            title: task.querySelector('.task-title').textContent.trim(),
                            labels: Array.from(task.querySelectorAll('.label')).map(label => label.textContent),
                            priority: task.getAttribute('data-priority'),
                            assignee: task.querySelector('.task-assignee').textContent.trim(),
                            comments: task.querySelector('.fa-comment').nextSibling.textContent.trim()
                        });
                    });

                    columns[columnId] = tasks;
                });

                localStorage.setItem('taskBoard', JSON.stringify(columns));
            }

            // 从本地存储加载
            function loadFromLocalStorage() {
                const savedData = localStorage.getItem('taskBoard');
                if (!savedData) return;

                const columns = JSON.parse(savedData);

                for (const [columnId, tasks] of Object.entries(columns)) {
                    const column = document.getElementById(columnId);
                    if (!column) continue;

                    const tasksContainer = column.querySelector('.tasks');
                    tasksContainer.innerHTML = '';

                    tasks.forEach(taskData => {
                        const task = document.createElement('div');
                        task.className = 'task';
                        task.draggable = true;
                        task.setAttribute('data-id', taskData.id);
                        task.setAttribute('data-priority', taskData.priority);

                        // 优先级指示器
                        const priorityClass = `priority-${taskData.priority}`;
                        const priorityIndicator = `<span class="task-priority ${priorityClass}"></span>`;

                        // 处理标签
                        const labelsHtml = taskData.labels.map(label => {
                            let labelClass = 'label-enhancement';

                            if (label === 'bug') labelClass = 'label-bug';
                            if (label === 'feature') labelClass = 'label-feature';
                            if (label === 'documentation') labelClass = 'label-documentation';
                            if (label === 'refactor') labelClass = 'label-refactor';

                            return `<span class="label ${labelClass}">${label}</span>`;
                        }).join('');

                        task.innerHTML = `
                            <div class="task-header">
                                <div class="task-title">
                                    ${priorityIndicator}
                                    ${taskData.title}
                                </div>
                                <i class="far fa-comment"> ${taskData.comments}</i>
                            </div>
                            <div class="task-labels">
                                ${labelsHtml}
                            </div>
                            <div class="task-meta">
                                <div>#${parseInt(taskData.id) + 100}</div>
                                <div class="task-assignee">
                                    <img src="https://avatars.githubusercontent.com/u/${taskData.assignee.charCodeAt(0) % 10}?v=4" alt="Assignee">
                                    ${taskData.assignee}
                                </div>
                            </div>
                        `;

                        // 添加事件监听器
                        task.addEventListener('dragstart', () => {
                            task.classList.add('dragging');
                        });

                        task.addEventListener('dragend', () => {
                            task.classList.remove('dragging');
                            updateTaskCounts();
                            saveToLocalStorage();
                        });

                        task.addEventListener('click', (e) => {
                            if (!e.target.closest('.fa-comment')) {
                                openModal(null, task);
                            }
                        });

                        // 添加到任务列表
                        tasksContainer.appendChild(task);
                    });
                }

                updateTaskCounts();
            }

            // 初始加载数据
            loadFromLocalStorage();
        });
    </script>
</body>

</html>